"use client"

import { useState } from "react"
import { View, Text, StyleSheet, TouchableOpacity, Platform } from "react-native"
import { Volume2 } from "lucide-react-native"
import { theme } from "../../constants/theme"

interface WordDetailViewProps {
    word: {
        word: string
        phonetics: {
            uk: string
            us: string
        }
        meanings: string[]
        forms: {
            type: string
            word: string
            meaning: string
        }[]
        phrases: {
            phrase: string
            meaning: string
        }[]
        examples: {
            en: string
            cn: string
            highlights?: string[]
        }[]
        etymology: {
            content: string
        }
    }
}

// 模拟的例句数据
const SENTENCES_DATA = [
    {
        en: "His blessing brought us good fortune.",
        cn: "他的祝福给我们带来了好运。",
    },
    {
        en: "She asked for her father's blessing before the wedding.",
        cn: "婚礼前她请求父亲的祝福。",
    },
    {
        en: "The rain was a blessing for the farmers after the drought.",
        cn: "干旱之后，雨水对农民来说是一种恩赐。",
    },
    {
        en: "It was a blessing that nobody was hurt in the accident.",
        cn: "事故中没有人受伤是一种幸运。",
    },
]

// 词性标签颜色映射
const POS_COLORS = {
    代词: "#FF6B6B",
    助动词: "#4CAF50",
    限定词: "#2196F3",
    名词: "#9C27B0",
    从属连词: "#607D8B",
    动词: "#FF9800",
    介词: "#795548",
    标点: "#9E9E9E",
    形容词: "#E91E63",
    副词: "#00BCD4",
}

// 语法标签颜色映射
const GRAMMAR_COLORS = {
    主语: "#FF6B6B",
    谓语: "#4CAF50",
    限定词: "#2196F3",
    表语: "#9C27B0",
    结构词: "#607D8B",
    宾语: "#E91E63",
    介词短语: "#795548",
    标点: "#9E9E9E",
    修饰语: "#00BCD4",
    连词: "#FF9800",
}

// 生成词性分析数据
const generatePosAnalysis = (sentence: string) => {
    const words = sentence.split(" ")
    return words.map((word) => {
        let tag = "名词" // 默认词性

        // 简单的词性判断逻辑
        if (word.match(/^(I|you|he|she|it|we|they|this|that|these|those)$/i)) {
            tag = "代词"
        } else if (word.match(/^(is|am|are|was|were|be|been|being)$/i)) {
            tag = "助动词"
        } else if (word.match(/^(a|an|the|some|any|my|your|his|her|its|our|their)$/i)) {
            tag = "限定词"
        } else if (word.match(/^(in|on|at|by|with|from|to|for|of|about)$/i)) {
            tag = "介词"
        } else if (word.match(/^(and|but|or|so|because|if|when|while|though)$/i)) {
            tag = "从属连词"
        } else if (word.match(/^(run|walk|eat|drink|see|hear|go|come|make|do|have|get).*(ed|ing)?$/i)) {
            tag = "动词"
        } else if (word.match(/^[.,!?;:]$/)) {
            tag = "标点"
        } else if (word.match(/^(good|bad|happy|sad|big|small|tall|short|beautiful|ugly).*(er|est)?$/i)) {
            tag = "形容词"
        } else if (word.match(/^(quickly|slowly|happily|sadly|well|badly|very|really|too|also)$/i)) {
            tag = "副词"
        }

        return {
            word,
            tag,
            color: POS_COLORS[tag] || "#9C27B0", // 默认颜色
        }
    })
}

// 生成语法分析数据
const generateGrammarAnalysis = (sentence: string) => {
    const words = sentence.split(" ")
    const result = []

    // 简单的语法分析逻辑
    for (let i = 0; i < words.length; i++) {
        const word = words[i]
        let tag = "宾语" // 默认语法角色

        if (i === 0 && !word.match(/^[.,!?;:]$/)) {
            tag = "主语"
        } else if (i === 1 && word.match(/^(is|am|are|was|were|be|been|being|have|has|had)$/i)) {
            tag = "谓语"
        } else if (word.match(/^(a|an|the|some|any|my|your|his|her|its|our|their)$/i)) {
            tag = "限定词"
        } else if (word.match(/^(in|on|at|by|with|from|to|for|of|about)$/i)) {
            tag = "介词短语"
        } else if (word.match(/^(and|but|or|so|because|if|when|while|though)$/i)) {
            tag = "结构词"
        } else if (word.match(/^(run|walk|eat|drink|see|hear|go|come|make|do).*(ed|ing)?$/i) && i > 0) {
            tag = "谓语"
        } else if (word.match(/^[.,!?;:]$/)) {
            tag = "标点"
        } else if (i > 1 && words[i - 1].match(/^(is|am|are|was|were)$/i)) {
            tag = "表语"
        }

        result.push({
            word,
            tag,
            color: GRAMMAR_COLORS[tag] || "#E91E63", // 默认颜色
        })
    }

    return result
}

export function WordDetailView({ word }: WordDetailViewProps) {
    const [exampleMode, setExampleMode] = useState<"none" | "grammar" | "pos">("none")

    const handlePlayAudio = () => {
        // 播放音频的逻辑
        console.log("Playing audio...")
    }

    return (
        <View style={styles.container}>
            {/* 第一块：单词和解释 */}
            <View style={styles.wordCard}>
                <View style={styles.wordHeader}>
                    <Text style={styles.wordText}>{word.word}</Text>
                    <TouchableOpacity style={styles.audioButton} onPress={handlePlayAudio}>
                        <Volume2 size={24} color={theme.colors.primary.default} />
                    </TouchableOpacity>
                </View>

                <Text style={styles.phoneticText}>{word.phonetics.uk}</Text>

                <View style={styles.meaningContainer}>
                    <Text style={styles.meaningText}>{word.meanings.join("；")}</Text>
                </View>
            </View>

            {/* 第二块：变形 - 全新设计 */}
            <View style={styles.sectionCard}>
                <View style={styles.sectionHeader}>
                    <View style={styles.sectionTitleContainer}>
                        <Text style={styles.sectionTitleText}>变形</Text>
                    </View>
                </View>

                <View style={styles.formsContainer}>
                    {word.forms.map((form, index) => (
                        <View key={index} style={styles.formRow}>
                            <View style={styles.formTypeColumn}>
                                <View style={[styles.formTypeCircle, getTypeColor(form.type)]}>
                                    <Text style={styles.formTypeText}>{form.type.charAt(0)}</Text>
                                </View>
                                {/* <Text style={styles.formTypeFullText}>{form.type}</Text> */}
                            </View>

                            <View style={styles.formDetailsColumn}>
                                <View style={styles.formWordContainer}>
                                    <Text style={styles.formWord}>{form.word}</Text>
                                    <TouchableOpacity style={styles.formAudioButton} onPress={handlePlayAudio}>
                                        <Volume2 size={16} color={theme.colors.primary.default} />
                                    </TouchableOpacity>
                                </View>
                                <Text style={styles.formMeaning}>{form.meaning}</Text>
                            </View>
                        </View>
                    ))}
                </View>
            </View>

            {/* 第三块：固定搭配 */}
            <View style={styles.sectionCard}>
                <View style={styles.sectionHeader}>
                    <View style={styles.sectionTitleContainer}>
                        <Text style={styles.sectionTitleText}>固定搭配</Text>
                    </View>
                </View>

                <View style={styles.phrasesContainer}>
                    {word.phrases.map((phrase, index) => (
                        <View key={index} style={styles.phraseRow}>
                            <View style={styles.phraseTextContainer}>
                                <Text style={styles.phraseText}>{phrase.phrase}</Text>
                                <TouchableOpacity style={styles.phraseAudioButton} onPress={handlePlayAudio}>
                                    <Volume2 size={16} color={theme.colors.primary.default} />
                                </TouchableOpacity>
                            </View>
                            <Text style={styles.phraseMeaning}>{phrase.meaning}</Text>
                        </View>
                    ))}
                </View>
            </View>

            {/* 第四块：实用口语 */}
            <View style={styles.sectionCard}>
                <View style={styles.exampleHeader}>
                    <View style={styles.sectionTitleContainer}>
                        <Text style={styles.sectionTitleText}>实用口语</Text>
                    </View>

                    <View style={styles.exampleModeContainer}>
                        <TouchableOpacity
                            style={[styles.modeButton, exampleMode === "none" && styles.modeButtonActive]}
                            onPress={() => setExampleMode("none")}
                        >
                            <Text style={[styles.modeButtonText, exampleMode === "none" && styles.modeButtonTextActive]}>无</Text>
                        </TouchableOpacity>
                        <TouchableOpacity
                            style={[styles.modeButton, exampleMode === "grammar" && styles.modeButtonActive]}
                            onPress={() => setExampleMode("grammar")}
                        >
                            <Text style={[styles.modeButtonText, exampleMode === "grammar" && styles.modeButtonTextActive]}>
                                语法
                            </Text>
                        </TouchableOpacity>
                        <TouchableOpacity
                            style={[styles.modeButton, exampleMode === "pos" && styles.modeButtonActive]}
                            onPress={() => setExampleMode("pos")}
                        >
                            <Text style={[styles.modeButtonText, exampleMode === "pos" && styles.modeButtonTextActive]}>词性</Text>
                        </TouchableOpacity>
                    </View>
                </View>

                <View style={styles.examplesList}>
                    {word.examples.map((example, index) => (
                        <View key={index} style={styles.exampleItem}>
                            {exampleMode === "none" ? (
                                // 原始的例句显示
                                <>
                                    <View style={styles.exampleEnglish}>
                                        <Text style={styles.exampleText}>
                                            {example.en.split(" ").map((word, i) => {
                                                const cleanWord = word.replace(/[.,!?;:]/g, "")
                                                const isPunctuation = word !== cleanWord
                                                const isHighlighted = example.highlights?.includes(cleanWord.toLowerCase())

                                                return (
                                                    <Text key={i}>
                                                        <Text style={isHighlighted ? styles.exampleWordHighlight : styles.exampleWord}>
                                                            {cleanWord}
                                                        </Text>
                                                        {isPunctuation && word.slice(cleanWord.length)}
                                                        {i < example.en.split(" ").length - 1 ? " " : ""}
                                                    </Text>
                                                )
                                            })}
                                        </Text>
                                        <TouchableOpacity style={styles.exampleAudioButton} onPress={handlePlayAudio}>
                                            <Volume2 size={16} color={theme.colors.primary.default} />
                                        </TouchableOpacity>
                                    </View>
                                    <View style={styles.exampleChinese}>
                                        <Text style={styles.exampleTranslation}>{example.cn}</Text>
                                    </View>
                                </>
                            ) : exampleMode === "pos" ? (
                                // 词性分析显示
                                <View style={styles.analysisContainer}>
                                    <View style={styles.analysisContent}>
                                        {generatePosAnalysis(example.en).map((item, i) => (
                                            <View key={i} style={styles.analysisItemColumn}>
                                                <View style={styles.analysisItemWrapper}>
                                                    <Text style={styles.analysisItemWord}>{item.word}</Text>
                                                    <Text style={[styles.analysisItemTag, { color: item.color }]}>{item.tag}</Text>
                                                </View>
                                            </View>
                                        ))}
                                    </View>
                                    <View style={styles.analysisFooter}>
                                        <Text style={styles.analysisChinese}>{example.cn}</Text>
                                        <TouchableOpacity style={styles.analysisAudioButton} onPress={handlePlayAudio}>
                                            <View style={styles.audioIconContainer}>
                                                <Volume2 size={16} color={theme.colors.neutral.white} />
                                            </View>
                                        </TouchableOpacity>
                                    </View>
                                </View>
                            ) : (
                                // 语法分析显示
                                <View style={styles.analysisContainer}>
                                    <View style={styles.analysisContent}>
                                        {generateGrammarAnalysis(example.en).map((item, i) => (
                                            <View key={i} style={styles.analysisItemColumn}>
                                                <View style={styles.analysisItemWrapper}>
                                                    <Text style={styles.analysisItemWord}>{item.word}</Text>
                                                    <Text style={[styles.analysisItemTag, { color: item.color }]}>{item.tag}</Text>
                                                </View>
                                            </View>
                                        ))}
                                    </View>
                                    <View style={styles.analysisFooter}>
                                        <Text style={styles.analysisChinese}>{example.cn}</Text>
                                        <TouchableOpacity style={styles.analysisAudioButton} onPress={handlePlayAudio}>
                                            <View style={styles.audioIconContainer}>
                                                <Volume2 size={16} color={theme.colors.neutral.white} />
                                            </View>
                                        </TouchableOpacity>
                                    </View>
                                </View>
                            )}
                        </View>
                    ))}
                </View>
            </View>

            {/* 第五块：例句 - 全新设计 */}
            <View style={styles.sectionCard}>
                <View style={styles.sectionHeader}>
                    <View style={styles.sectionTitleContainer}>
                        <Text style={styles.sectionTitleText}>例句</Text>
                    </View>
                </View>

                <View style={styles.sentencesGrid}>
                    {SENTENCES_DATA.map((sentence, index) => (
                        <View key={index} style={styles.sentenceContainer}>
                            <View style={styles.sentenceContent}>
                                <View style={styles.sentenceEnglishRow}>
                                    <Text style={styles.sentenceEnText}>{sentence.en}</Text>
                                    <TouchableOpacity style={styles.sentenceAudioButton} onPress={handlePlayAudio}>
                                        <Volume2 size={16} color={theme.colors.primary.default} />
                                    </TouchableOpacity>
                                </View>
                                <Text style={styles.sentenceCnText}>{sentence.cn}</Text>
                            </View>
                        </View>
                    ))}
                </View>
            </View>

            {/* 第六块：词源 */}
            <View style={styles.sectionCard}>
                <View style={styles.sectionHeader}>
                    <View style={styles.sectionTitleContainer}>
                        <Text style={styles.sectionTitleText}>词源</Text>
                    </View>
                </View>
                <Text style={styles.etymologyText}>{word.etymology.content}</Text>
            </View>
        </View>
    )
}

// 根据词性获取颜色
const getTypeColor = (type: string) => {
    switch (type) {
        case "名词":
            return { backgroundColor: theme.colors.secondary.green.default }
        case "动词":
            return { backgroundColor: theme.colors.primary.default }
        case "形容词":
            return { backgroundColor: theme.colors.secondary.orange.default }
        case "副词":
            return { backgroundColor: "#8B5CF6" } // 紫色
        default:
            return { backgroundColor: theme.colors.neutral.gray }
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingHorizontal: theme.spacing.lg,
    },
    wordCard: {
        backgroundColor: theme.colors.neutral.white,
        borderRadius: theme.borderRadius.large,
        padding: theme.spacing.lg,
        marginBottom: theme.spacing.lg,
        ...Platform.select({
            ios: {
                shadowColor: "rgba(0, 0, 0, 0.1)",
                shadowOffset: { width: 0, height: 4 },
                shadowOpacity: 0.5,
                shadowRadius: 8,
            },
            android: {
                elevation: 4,
            },
        }),
    },
    wordHeader: {
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "space-between",
        marginBottom: theme.spacing.md,
    },
    wordText: {
        fontSize: 32,
        fontWeight: theme.fontWeight.bold,
        color: theme.colors.neutral.black,
    },
    audioButton: {
        width: 44,
        height: 44,
        borderRadius: 22,
        backgroundColor: `${theme.colors.primary.default}15`,
        alignItems: "center",
        justifyContent: "center",
    },
    phoneticText: {
        fontSize: theme.fontSize.md,
        color: theme.colors.neutral.darkGray,
        marginBottom: theme.spacing.md,
    },
    meaningContainer: {
        marginTop: theme.spacing.md,
        borderTopWidth: 1,
        borderTopColor: theme.colors.neutral.lightGray,
        paddingTop: theme.spacing.md,
    },
    meaningText: {
        fontSize: theme.fontSize.lg,
        color: theme.colors.neutral.darkGray,
        lineHeight: 28,
    },
    sectionCard: {
        backgroundColor: theme.colors.neutral.white,
        borderRadius: theme.borderRadius.large,
        padding: theme.spacing.lg,
        marginBottom: theme.spacing.lg,
        ...Platform.select({
            ios: {
                shadowColor: "rgba(0, 0, 0, 0.1)",
                shadowOffset: { width: 0, height: 4 },
                shadowOpacity: 0.5,
                shadowRadius: 8,
            },
            android: {
                elevation: 4,
            },
        }),
    },
    sectionHeader: {
        flexDirection: "row",
        marginBottom: theme.spacing.lg,
    },
    sectionTitleContainer: {
        paddingHorizontal: theme.spacing.lg,
        paddingVertical: theme.spacing.xs,
        borderRadius: 10,
        backgroundColor: theme.colors.primary.default,
    },
    sectionTitleText: {
        fontSize: theme.fontSize.sm,
        fontWeight: theme.fontWeight.semiBold,
        color: theme.colors.neutral.white,
    },

    // 变形部分样式 - 全新设计
    formsContainer: {
        gap: theme.spacing.lg,
    },
    formRow: {
        flexDirection: "row",
        alignItems: "flex-start",
    },
    formTypeColumn: {
        alignItems: "center",
        width: 50,
        marginRight: theme.spacing.md,
    },
    formTypeCircle: {
        width: 36,
        height: 36,
        borderRadius: 18,
        backgroundColor: theme.colors.primary.default,
        alignItems: "center",
        justifyContent: "center",
        marginBottom: theme.spacing.xs,
    },
    formTypeText: {
        color: theme.colors.neutral.white,
        fontSize: theme.fontSize.md,
        fontWeight: theme.fontWeight.bold,
    },
    formTypeFullText: {
        fontSize: theme.fontSize.xs,
        color: theme.colors.neutral.darkGray,
        textAlign: "center",
    },
    formDetailsColumn: {
        flex: 1,
    },
    formWordContainer: {
        flexDirection: "row",
        alignItems: "center",
        marginBottom: theme.spacing.xs,
    },
    formWord: {
        fontSize: theme.fontSize.lg,
        fontWeight: theme.fontWeight.semiBold,
        color: theme.colors.neutral.black,
        marginRight: theme.spacing.md,
    },
    formAudioButton: {
        padding: 4,
    },
    formMeaning: {
        fontSize: theme.fontSize.md,
        color: theme.colors.neutral.darkGray,
    },

    // 固定搭配部分样式 - 更新设计
    phrasesContainer: {
        gap: theme.spacing.md,
    },
    phraseRow: {
        marginBottom: theme.spacing.lg,
    },
    phraseTextContainer: {
        flexDirection: "row",
        alignItems: "center",
        marginBottom: theme.spacing.xs,
    },
    phraseText: {
        fontSize: theme.fontSize.md,
        fontWeight: theme.fontWeight.semiBold,
        color: theme.colors.neutral.darkGray,
        marginRight: theme.spacing.md,
        flex: 1,
    },
    phraseAudioButton: {
        padding: 4,
    },
    phraseMeaning: {
        fontSize: theme.fontSize.sm,
        color: theme.colors.neutral.darkGray,
    },

    // 实用口语部分样式
    exampleHeader: {
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "space-between",
        marginBottom: theme.spacing.lg,
    },
    exampleModeContainer: {
        flexDirection: "row",
        backgroundColor: theme.colors.neutral.lightGray,
        borderRadius: theme.borderRadius.medium,
        padding: 2,
    },
    modeButton: {
        paddingHorizontal: theme.spacing.md,
        paddingVertical: theme.spacing.xs,
        borderRadius: theme.borderRadius.medium - 2,
    },
    modeButtonActive: {
        backgroundColor: theme.colors.neutral.white,
    },
    modeButtonText: {
        fontSize: theme.fontSize.xs,
        color: theme.colors.neutral.gray,
    },
    modeButtonTextActive: {
        color: theme.colors.primary.default,
        fontWeight: theme.fontWeight.semiBold,
    },
    examplesList: {
        gap: theme.spacing.md,
    },
    exampleItem: {
        marginBottom: theme.spacing.lg,
        borderRadius: theme.borderRadius.large,
        overflow: "hidden",
        backgroundColor: theme.colors.neutral.white,
    },
    exampleEnglish: {
        flexDirection: "row",
        padding: theme.spacing.md,
        backgroundColor: theme.colors.neutral.white,
    },
    exampleText: {
        flex: 1,
        fontSize: theme.fontSize.md,
        color: theme.colors.neutral.black,
        lineHeight: 24,
    },
    exampleWord: {
        color: theme.colors.neutral.black,
    },
    exampleWordHighlight: {
        color: theme.colors.primary.default,
        fontWeight: theme.fontWeight.semiBold,
    },
    exampleChinese: {
        padding: theme.spacing.md,
        backgroundColor: `${theme.colors.primary.default}05`,
        borderTopWidth: 1,
        borderTopColor: `${theme.colors.primary.default}15`,
    },
    exampleTranslation: {
        fontSize: theme.fontSize.md,
        color: theme.colors.neutral.darkGray,
    },
    exampleAudioButton: {
        marginLeft: theme.spacing.sm,
    },

    // 词性和语法分析样式
    analysisContainer: {
        padding: theme.spacing.lg,
        backgroundColor: theme.colors.neutral.white,
        borderRadius: theme.borderRadius.medium,
    },
    analysisContent: {
        flexDirection: "row",
        flexWrap: "wrap",
        justifyContent: "flex-start",
        marginBottom: theme.spacing.md,
    },
    analysisItemColumn: {
        marginBottom: theme.spacing.md,
        marginRight: theme.spacing.md,
        width: "auto",
    },
    analysisItemWrapper: {
        backgroundColor: "#F5F5F5",
        borderRadius: theme.borderRadius.small,
        padding: theme.spacing.sm,
        alignItems: "center",
    },
    analysisItemWord: {
        fontSize: theme.fontSize.md,
        color: theme.colors.neutral.black,
        marginBottom: 4,
        textAlign: "center",
    },
    analysisItemTag: {
        fontSize: theme.fontSize.xs,
        fontWeight: theme.fontWeight.medium,
        textAlign: "center",
    },
    analysisFooter: {
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "center",
        marginTop: theme.spacing.sm,
    },
    audioIconContainer: {
        width: 36,
        height: 36,
        borderRadius: 18,
        backgroundColor: theme.colors.primary.default,
        alignItems: "center",
        justifyContent: "center",
    },
    analysisAudioButton: {
        marginLeft: theme.spacing.sm,
    },
    analysisChinese: {
        flex: 1,
        fontSize: theme.fontSize.sm,
        color: theme.colors.neutral.darkGray,
    },
    // analysisWords: {
    //   flex: 1,
    //   flexDirection: "row",
    //   flexWrap: "nowrap", // 改为不换行
    //   justifyContent: "space-between",
    //   gap: theme.spacing.md,
    // },
    // analysisWordColumn: {
    //   alignItems: "center",
    //   flex: 1,
    // },
    // analysisWord: {
    //   fontSize: theme.fontSize.md,
    //   color: theme.colors.neutral.black,
    //   marginBottom: theme.spacing.sm,
    //   textAlign: "center",
    // },
    // analysisLine: {
    //   width: 1,
    //   height: 16,
    //   backgroundColor: theme.colors.neutral.lightGray,
    //   marginVertical: 4,
    // },
    // analysisTag: {
    //   backgroundColor: theme.colors.neutral.lightGray,
    //   padding: theme.spacing.sm,
    //   borderRadius: theme.borderRadius.medium,
    //   minWidth: 60,
    //   alignItems: "center",
    // },
    // analysisTagText: {
    //   fontSize: theme.fontSize.sm,
    //   color: theme.colors.neutral.darkGray,
    //   textAlign: "center",
    // },
    // audioIconContainer: {
    //   width: 36,
    //   height: 36,
    //   borderRadius: 18,
    //   backgroundColor: theme.colors.primary.default, // 改为主题色
    //   alignItems: "center",
    //   justifyContent: "center",
    // },
    // analysisAudioButton: {
    //   marginLeft: theme.spacing.sm,
    //   marginTop: 4,
    // },
    // analysisWordsScroll: {
    //   flex: 1,
    //   marginRight: theme.spacing.md,
    // },
    // analysisChinese: {
    //   fontSize: theme.fontSize.sm,
    //   color: theme.colors.neutral.darkGray,
    //   marginTop: theme.spacing.sm,
    // },

    // 例句部分样式 - 全新设计
    sentencesGrid: {
        gap: theme.spacing.lg,
    },
    sentenceContainer: {
        flexDirection: "row",
        alignItems: "flex-start",
        marginBottom: theme.spacing.md,
    },
    sentenceContent: {
        flex: 1,
    },
    sentenceEnglishRow: {
        flexDirection: "row",
        alignItems: "center",
        marginBottom: theme.spacing.xs,
    },
    sentenceEnText: {
        flex: 1,
        fontSize: theme.fontSize.sm,
        color: theme.colors.neutral.darkGray,
        fontWeight: theme.fontWeight.medium,
        lineHeight: 22,
    },
    sentenceAudioButton: {
        marginLeft: theme.spacing.sm,
        padding: 4,
    },
    sentenceCnText: {
        fontSize: theme.fontSize.md,
        color: theme.colors.neutral.darkGray,
        lineHeight: 22,
    },

    // 词源部分样式
    etymologyText: {
        fontSize: theme.fontSize.sm,
        color: theme.colors.neutral.darkGray,
        lineHeight: 22,
    },
})

